<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>热门活动</title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			.box{
				width:700px;
				margin: 10px auto;
				box-sizing: border-box;
			}
			.clearfix{
				display:table;
				content: "";
				clear:both;	
			}
			h3{
				font-size:24px ;
				float: left;
			}
			h4{
				font-size:20px;
				color: #ccc;
				float:right;
				font-weight: bold;
			}
			p{
				font-size:12px;
			}
			li{
				display: inline-block;
				text-decoration: none;
				margin:10px 20px;
			}
			li:nth-of-type(n){
				float:left;
			}
			a{
				color:#222;
				text-decoration: none;
			}
			a:hover{
				color:red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<diV class="box clearfix">
				<h3>热门活动</h3>
				<h4>更多</h4>
			</diV>
			<ul class="clearfix">
				<li>
					<img src="image/img1.png" />
					<p><a href="#">推荐活动 | 原创音乐现金榜T榜</a></p>
				</li>
		    	<li>
					<img src="image/img2.png" />
					<p><a href="#">推荐节目|《TAImusic》爆笑来袭</a></p>
				</li>
				<li>
					<img src="image/img3.png" />
					<p><a href="#">推荐歌单 | 继续宠爱张国荣</a></p>
				</li>
				<li>
					<img src="image/img4.png" />
					<p><a href="#">推荐活动| 330金属音乐巡演 成都小酒馆音乐空间</a></p>
				</li>
			</ul>
		</div>
	</body>
</html>








